<template>
    <div class="brand-list">
      <div class="item "  v-for="(item,index) in MainList" :key="index" :style="{backgroundImage: 'url(' + item.app_list_pic_url + ')' ,backgroundSize:'cover',}">
       <div class="text">
         <div>{{item.name}}</div>
         <div class="line"></div>
         <div>{{item.floor_price}}元起</div>
       </div>
         
      </div>

    </div>
</template>

<script>
import brandApi from "@/netapi/home/home.js"
import _ from "lodash"
export default {
  name:"BrandList",
    components: {

    },
    data() {
        return {
          MainList:[],
          total:"",
        };
    },
    computed: {

    },
    created() {
      this.getMainlist()
    },
    mounted() {

    },
    methods: {
      //循环获取数据
     async getAll(){
       
        for (let i = 2; i < this.total+1; i++) {
          await  brandApi.BrandList({page:i}).then(res=>{
            console.log(res.data);
            this.MainList = _.concat(this.MainList, res.data)
            }) 
        }
      },
      getMainlist(){
        brandApi.BrandList({
          page:1
        }).then(res=>{
          this.total = res.total
          this.MainList =res.data
           this.getAll()
        })
      }
    },
};
</script>

<style scoped lang="scss">
.brand-list{
  width: 100%;
  .item{
    width: 100%;
    height: 210px;
    
    background: no-repeat center;
    display: flex;
    border-bottom: 3px solid #f4f4f4; 
    .text{
      width: 100%;
      height: 21px;
      font-size: 20px;
      color: white;
      font-weight: bold;
      display: flex;
      justify-content: center;
      flex-wrap: nowrap;
      align-items: center;
      margin-top: 95px;

      .line{
        width: 4px;
        height: 21px;
        background-color: #fff;
        margin: 0px 3px;
      }
    }
  }
  
}
.brand-list:nth-child(1){
  margin-top: 46px;
}
</style>
